<template>
  <el-dialog
    :visible.sync="openAuthDialog"
    :fullscreen="true"
    :show-close="false">
    <div style="
          border-bottom: 1px solid rgb(232,232,232);
          position: absolute;
          top: 0; left: 0;
          height: 70px; width: 100%;
          line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <span style="font-weight: bold; font-size: 20px;">{{ title }}</span>

      <div style="float:right;">
        <el-button plain icon="el-icon-close" @click="openAuthDialog = false"></el-button>
      </div>

    </div>

    <div style="margin: 40px 40px 70px 40px;">
      <el-card class="box-card" style="margin-bottom: 20px;" v-show="authList.length > 0">
        <div slot="header" class="clearfix">
          <span>{{ title }}</span>
        </div>

        <el-row>
          <el-col :span="16"><div class="grid-content bg-purple" style="padding: 10px;">
            <el-table
              ref="multipleTable"
              :data="authList"
              height="657"
              max-height="657"
              border
              tooltip-effect="dark"
              style="width: 100%;height: 600px;"
              @current-change="handleUserCurrentChange"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                align="center"
                width="55">
              </el-table-column>
              <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
                sortable>
              </el-table-column>
              <el-table-column
                prop="auth"
                align="center"
                label="权限名"
                width="150">
              </el-table-column>
              <el-table-column
                prop="documentation"
                align="center"
                label="权限介绍">
              </el-table-column>
            </el-table>
          </div></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light" style="padding: 10px;">
              <div style="border: 1px solid #dfe6ec; width: 100%;height: 40px;padding: 10px; font-size: 16px;">
                <span style="float:left;" @click="test()">已选</span>
                <span style="float:right;">
                    <i style="cursor: pointer" class="el-icon-delete" @click="handleDeleteSelectUserButton()"></i>
                  </span>
              </div>
              <div style="border: 1px solid #dfe6ec; height: 620px; margin-top: -1px;padding: 10px; max-height: 620px;overflow-y: scroll;">
                <el-empty :image-size="60" v-show="!selectAuthList.length > 0"></el-empty>
                <div v-for="(item,index) in selectAuthList" :key="index"
                     style="padding: 10px; height: 40px; border: 1px solid #dfe6ec; margin-top: -1px;">
                  <span style="float:left;">{{ item.auth }}</span>
                  <span style="float:right;">
                      <i style="cursor: pointer" class="el-icon-delete" @click="handleDeleteSelectUserButton(item)"></i>
                    </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div style="background-color: white;
        border-top: 1px solid rgb(232,232,232);
        position: absolute;
        bottom: 0; left: 0;
        height: 70px; width: 100%;
        line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <div style="float:right; margin: 17px;">
        <el-button type="primary" style="float: right" @click.native="handleProcessInstance()">提交</el-button>
        <el-button plain style="float: right; margin-right: 20px;" @click="openAuthDialog = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: "user",
  data(){
    return {
      openAuthDialog: false,
      title: '',
      property: null,
      propertyName: null,
      authList: [],
      checkAuthList: [],
      commandStack: null,
      element: null,

      auth: null,
      selectAuthList: [],
    }
  },
  mounted() {
    this.handleCheckUser()
  },
  methods: {
    handleUserCurrentChange(val) {
      this.auth = val.auth
    },
    handleSelectionChange(val) {
      this.selectAuthList = val;
    },
    handleDeleteSelectUserButton(rows) {
      if (rows) {
        this.$refs.multipleTable.toggleRowSelection(rows);
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleProcessInstance(){
      if(this.commandStack && this.element && this.property){
        let value = ''
        const element = this.element
        this.selectAuthList.forEach((item) => {
          value = value + item.auth + ';'
        })
        this.commandStack.execute('element.updateModdleProperties', {
          element,
          moddleElement: this.property,
          properties: {
            value
          }
        });
        this.openAuthDialog = false
      }
    },
    handleCheckUser(){
      const _this_ = this
      this.$nextTick(function() {
        const _this = this.$refs.multipleTable
        /*现在数据已经渲染完毕*/
        _this_.checkAuthList.forEach((item) => {
          this.authList.forEach((user) => {
            if (user.auth === item.auth) {
              _this.toggleRowSelection(user);
            }
          })
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
